<script setup lang="ts">
import router from '@/router';
import { reactive } from 'vue';

const routes = reactive([
    {
        img:"https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0",
        id:0,
    },
    {
        img:"https://b.zol-img.com.cn/sjbizhi/images/11/1080x1920/1592967802496.jpg",
        id:1,
    },
    {
        img:"https://ts1.cn.mm.bing.net/th/id/R-C.cc4ad9d8462eafd74ddc3d7724f0b6de?rik=9ZAgztDL%2bJ1VxA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50016%2f2748.jpg_wh1200.jpg&ehk=pE1C6jvusW8BbRkz3LcSA7iPmOc9NbcJQhUOlLGLHhY%3d&risl=&pid=ImgRaw&r=0",
        id:2,
    }
])


const goPlan= (img:any)=>{
    router.push({
        path:"/routeplan",
        query:{
            img:img
        }
    });
}

</script>


<template>
    <div class="fun-route-head" @click="()=>{
        $router.push('/home/index')
    }">
       <span class="fun-route-title"> &#60;</span><span class="fun-route-title">趣味路线图</span>
    </div>
    <div class="fun-route-content">
        <img v-for="(item,index) of routes" @click="goPlan(item.img)" :src="item.img" :key="index" alt="">
    </div>

</template>

<style scoped> 
.fun-route-head{
    position: absolute;
    top: 0;
}
.fun-route-head span{
    font-size: 18px
}
.fun-route-content{
    position: relative;
    /* background: paleturquoise; */
    height: 93vh;
    top: 40px;
    overflow: scroll;
}
.fun-route-content img{
    width: 100%;
    height: 150px;
    position: relative;
}

</style>